<template>
  <div>
    <ElForm inline>
      <ElFormItem label="申请部门">
        <ElSelect multiple v-model="queryCondition.departments">
          <ElOption label="销售部" value="sale"></ElOption>
          <ElOption label="财务部" value="finance"></ElOption>
          <ElOption label="市场部" value="duration"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="">
        <ElSelect multiple v-model="queryCondition.status">
          <ElOption label="待审核" value="toAudit"></ElOption>
          <ElOption label="已审核" value="auditted"></ElOption>
          <ElOption label="已打回" value="repulse"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="起始时间">
        <ElDatePicker v-model="queryCondition.timestart"></ElDatePicker>
      </ElFormItem>
      <ElFormItem label="终止时间">
        <ElDatePicker v-model="queryCondition.timend"></ElDatePicker>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="queryByCondition()">搜索</ElButton>
        <ElButton type="primary" @click="reset()" plain>刷新</ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable :data="results">
      <ElTableColumn label="单号" prop="subexponseCode"></ElTableColumn>
      <ElTableColumn label="申请部门">
        <template #default="{ row }">
          <span v-if="row.department === 'sale'">销售部</span>
          <span v-if="row.department === 'duration'">市场部</span>
          <span v-if="row.department === 'finance'">财务部</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="申请金额" prop="money"></ElTableColumn>
      <ElTableColumn label="申请原因" prop="useto"></ElTableColumn>
      <ElTableColumn label="申请状态"
        ><template #default="{ row }">
          <ElTag v-if="row.status == 'toSubmit'">待提交</ElTag>
          <ElTag v-if="row.status == 'toAudit'" type="info">待审核</ElTag>
          <ElPopover placement="top-start" :width="200" trigger="hover">
            <li>审核意见：{{ row.examinetext }}</li>
            <li>审核人：{{ row.examinepeople }}</li>
            <li>审核时间：{{ time(new Date(row.applytime)) }}</li>
            <template #reference>
              <ElTag v-if="row.status == 'auditted'" type="success">已审核</ElTag>
            </template>
          </ElPopover>
          <ElPopover placement="top-start" :width="200" trigger="hover">
            <li>审核意见：{{ row.examinetext }}</li>
            <li>审核人：{{ row.examinepeople }}</li>
            <li>审核时间：{{ time(new Date(row.applytime)) }}</li>
            <template #reference>
              <ElTag v-if="row.status == 'repulse'" type="danger">已打回</ElTag>
            </template>
          </ElPopover>
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作区">
        <template #default="{ row }"
          ><ElButton
            type="success"
            size="small"
            @click="find(row)"
            v-if="row.status === 'toAudit' || row.status === 'auditted'"
            >查看</ElButton
          >
          <ElButton type="success" size="small" v-if="row.status === 'repulse'" disabled
            >查看</ElButton
          >
          <ElButton type="warning" size="small" @click="Audit(row)" v-if="row.status === 'toAudit'"
            >审核</ElButton
          >
          <ElButton
            type="warning"
            size="small"
            @click="Audit(row)"
            v-if="row.status === 'auditted' || row.status === 'repulse'"
            disabled
            >审核</ElButton
          >
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <subexponseaudit ref="audit" @putaudit="reset"></subexponseaudit>
    <Subexponsefind ref="find"></Subexponsefind>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export type status = 'toAudit' | 'auditted' | 'repulse'
export type departments = 'sale' | 'finance' | 'duration'
export type subexponse = {
  subexponseCode: string
  applier: string
  department: departments
  useto: string | null
  examinepeople: null
  money: number
  examinetext: string | null
  status: status
  applytime: Date
}
export default {
  name: 'SubExponse',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        departments: [],
        status: [],
        timestart: null,
        timend: null,
        pageNum: 1,
        pageSize: 5
      },
      results: [] as Array<subexponse>,
      total: 0
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition()
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      await axios({
        method: 'POST',
        url: 'http://127.0.0.1:7001/subexponse/query/auditter',
        data: this.queryCondition
      }).then(
        (res) => {
          console.log(res.data.results)
          console.log(res.data.total)
          this.results = res.data.results
          this.total = res.data.total
        },
        (error) => {
          console.log(error.response.data)
        }
      )
    },
    reset() {
      this.queryCondition = {
        departments: [],
        status: [],
        timestart: null,
        timend: null,
        pageNum: 1,
        pageSize: 5
      }
      this.queryByCondition()
    },
    Audit(row: any) {
      const audit: any = this.$refs.audit
      audit.visible = true
      audit.code = row.subexponseCode
    },
    find(row: any) {
      const findcondition: any = this.$refs.find
      findcondition.visible = true
      findcondition.findcondition = row
    },
    time(date: Date) {
      const datec =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1) +
        '月' +
        date.getDate() +
        '日' +
        date.getHours() +
        '时' +
        date.getMinutes() +
        '分' +
        date.getSeconds() +
        '秒'
      //用法
      // <ElTableColumn> <template #default="{ row }">
      //     <span>{{ time(new Date(row.applytime)) }}</span>
      //   </template></ElTableColumn>
      return datec
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
